* {
  margin: 0;
  padding: 0;
}
#wrap {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
#wrap header,
#wrap footer {
  display: flex;
  height: 100px;
  background-color: #666666;
}
#wrap .content {
  display: flex;
  flex-grow: 1;
  background-color: bisque;
}
#wrap .content .left-side {
  flex: 0 0 12em;
  background-color: #77BBDD;
}
#wrap .content .right-side {
  flex: 0 0 12em;
  background-color: #FF6633;
}
#wrap .content .center {
  flex: 1;
  background-color: #D6D6D6;
}
@media (max-width: 768px) {
  #wrap .content {
    flex-direction: column;
    flex: 1;
  }
  #wrap .content .leftside,
  #wrap .content .center,
  #wrap .content .rightside {
    flex: auto;
  }
}
